<template>
  <div ref="dom" class="charts chart-line"></div>
</template>

<script>
  import {kbTo} from 'common/js/utl'
import echarts from 'echarts'
import tdTheme from './theme.json'
echarts.registerTheme('tdTheme', tdTheme)
export default {
  name: 'ChartLine',
  props: {
    value: Object,
    text: String,
    subtext: String
  },
  data () {
    return {
      dom: null
    }
  },
  methods: {
    resize () {
      this.dom.resize()
    }
  },
  watch: {
    value(v){
      if(!v || !this.dom){
        return
      }
      this.dom.setOption(v)
    }
  },
  mounted () {
    let me = this
    this.$nextTick(() => {
      let option = {
        // title: {
        //   text: '数据图表',
        //   x: 'center'
        // },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          formatter: function (params) {
            let dt = params[0]
            return dt.name + ': ' +  kbTo(dt.value) + (dt.data['valueUnit'] || '')  + '<br />'+  dt.axisValue
          },
          // axisPointer: {
          //   animation: false
          // }
        },
        // dataZoom: [
        //   {
        //     type: 'slider',
        //     show: true,
        //     start: 0,
        //     end: 100,
        //     handleSize: 8
        //   },
        //   {
        //     type: 'inside',
        //     start: 94,
        //     end: 100
        //   }
        // ],
        grid: {
          top: '5%',
          bottom: '5%',
          left: '2%',
          right: '4%',
          containLabel: true,
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {}
        //   }
        // },
        axisPointer: {
          link: {xAxisIndex: 'all'},
          snap: true,
          label: {
            backgroundColor: '#777'
          }
        },
        xAxis: {
          type: 'time',
          boundaryGap: false,
          data: [],

        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false,
          },
          axisLabel: {
            formatter(value, index) {
              return kbTo(value)
            }
          }
        },
        series: []
      };
      this.dom = echarts.init(this.$refs.dom, 'tdTheme')
      this.dom.setOption(option)
    })
  }
}
</script>
<style scoped>
  .chart-line {
    height: 100%;
    width: 100%;
  }
</style>

















